<template>
  <div class="app-container">
    <el-tabs v-model="form.name" @tab-click="handleClick">
      <el-tab-pane label="老板推荐" name="first">
        <el-row>
          <el-col :span="24"><h5>老板推荐菜设置</h5></el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            推荐菜：
            <el-radio-group v-model="form.a">
            <el-radio :label="3">不开启</el-radio>
            <el-radio :label="6">智能模式（根据客户属性，智能推荐商品）</el-radio>
            <el-radio :label="9">自定义模式</el-radio>
          </el-radio-group>
            <el-button size="mini" @click="dialogVisible = true">选择商品</el-button>
          </el-col>
        </el-row>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData"
          style="width: 100%">
          <el-table-column label="序号" width="60">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="商户名称" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
            </template>
          </el-table-column>
          <el-table-column label="价格" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <!--{{scope.row.}}-->
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <!--<el-button type="primary" plain size="mini" @click="toDetail(scope.row.id)">查 看</el-button>-->
              <el-button type="danger" plain size="mini" @click="del(scope.row.id)">删除</el-button>
              <!--<el-button type="primary" plain size="mini" @click="pass(scope.row.id, 2)">通过</el-button>-->
              <!--<el-button type="danger" plain size="mini" @click="pass(scope.row.id, 3)">不通过</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="店铺招牌" name="second">
        <el-row>
          <el-col :span="24">
            <h5>招牌图片</h5>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="decorate-span">
            <span>上传图片：</span>
            <span>1、店铺招牌可用于突出品牌或商品特色</span>
            <span>2、图片格式为JPG/PNG;不得小于750*288像素</span>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!---->
    <el-dialog
      title="选择商品"
      :visible.sync="dialogVisible"
      width="50%">
      <p>已添加商品数量：3</p>
      <p style="font-size: 11px;color: #ccc">点击拖动商品名称可调整商品显示的顺序</p>
      <div class="move-box" @mousedown="move" v-for="(item,index) in 4" :key="index">
        <!--{{positionX}}-->
        {{positionY}}
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { page } from '@/mixins/page'

  export default {
    mixins: [page],
    data() {
      return {
        dialogVisible: false,
        tableData: [{}, {}],
        form: {
          name: 'first'
        },
        // positionX: 0,
        positionY: 0
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
      move(e) {
        console.log(e)
        var odiv = e.target
        var disX = e.clientX - odiv.offsetLeft
        // var disY = e.clientY - odiv.offsetTop
        document.onmousemove = (e) => {
          var left = e.clientX - disX
          // var top = e.clientY - disY
          // this.positionX = top
          this.positionY = left
          odiv.style.left = left + 'px'
          // odiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
        odiv.style.left = 0
      }
    }
  }
</script>

<style scoped lang="scss" src="./index.scss"></style>
